<template>
	<view>
		<u-form v-if="inited" ref="formRef" labelPosition="left" :model="form" :rules="rules">
			<view class="title">
				<text>采样位置</text>
				<!-- 国控点的情况下提示是否小于 200 米 -->
				<u-icon v-if="p1Edit" color="#1296db" label-color=" #1296db" name="map-fill" :label="distanceLabel" @click="calcDistance"></u-icon>
				<!-- 省控点 && (add || edit) 获取经纬度 -->
				<u-icon v-if=" p2Edit" label="获取经纬度" label-color="#1296db" color="#1296db" name="map-fill" @click="getPosition"></u-icon>
			</view>
			<view class="form_group">
				<!-- 国空点在任何情况下都不允许修改经纬度 -->
				<z-input label="东经:" labelWidth="90" prop="wgs84Longitude" :disabled="!p2Edit" :readonly="!p2Edit" :required="true" :value="form.wgs84Longitude"
					@change="(val) => setVal('task', 'wgs84Longitude', val)"></z-input>
				<z-input label="北纬:" labelWidth="90" prop="wgs84Latitude" :disabled="!p2Edit" :readonly="!p2Edit" :required="true" :value="form.wgs84Latitude"
					@change="(val) => setVal('task', 'wgs84Latitude', val)"></z-input>
				<z-input label="海拔:" labelWidth="90" prop="wgs84Altitude" :disabled="!p2Edit" :readonly="!p2Edit" :required="true" :value="form.wgs84Altitude"
					@change="(val) => setVal('task', 'wgs84Altitude', val)"></z-input>
				<z-input label="屏显经度:" labelWidth="90" prop="screenLongitude" :disabled="cantEdit" :readonly="cantEdit" :required="true"
					:value="form.screenLongitude" @change="(val) => setVal('record', 'screenLongitude', val)"></z-input>
				<z-input label="屏显维度:" labelWidth="90" prop="screenLatitude" :disabled="cantEdit" :readonly="cantEdit" :required="true"
					:value="form.screenLatitude" @change="(val) => setVal('record', 'screenLatitude', val)"></z-input>
				<z-input label="屏显海拔:" labelWidth="90" prop="screenAltitude" :disabled="cantEdit" :readonly="cantEdit" :required="true"
					:value="form.screenAltitude" @change="(val) => setVal('record', 'screenAltitude', val)"></z-input>
			</view>
			<view class="title">基础环境信息</view>
			<view class="form_group">
				<z-input-picker keyName="label" label="土地利用方式:" labelWidth="120" prop="landUse" :disabled="!p2Edit" :list="landUseList" :required="true"
					:showPicker="showlandUsePicker" :value="form.landUseName" @cancel="showlandUsePicker = false" @confirm="setLandUse"
					@open="() => {if(p2Edit){ showlandUsePicker = true }}"></z-input-picker>
			</view>
			<view class="title">施肥量(千克/年/亩)</view>
			<view class="form_group">
				<z-input label="氮肥:" labelWidth="90" prop="nitrogen" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.nitrogen" @change="(val) => setVal('record', 'nitrogen', val)"></z-input>
				<z-input label="磷肥:" labelWidth="90" prop="phosphate" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.phosphate" @change="(val) => setVal('record', 'phosphate', val)"></z-input>
				<z-input label="钾肥:" labelWidth="90" prop="potassium" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.potassium" @change="(val) => setVal('record', 'potassium', val)"></z-input>
				<z-input label="有机肥:" labelWidth="90" prop="organic" :disabled="cantEdit" :readonly="cantEdit" :required="false" :value="form.organic"
					@change="(val) => setVal('record', 'organic', val)"></z-input>
				<z-input label="复合肥:" labelWidth="90" prop="compound" :disabled="cantEdit" :readonly="cantEdit" :required="false" :value="form.compound"
					@change="(val) => setVal('record', 'compound', val)"></z-input>
				<z-input label="正东信息:" labelWidth="90" prop="eastInfo" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.eastInfo" @change="(val) => setVal('record', 'eastInfo', val)"></z-input>
				<z-input label="正南信息:" labelWidth="90" prop="southInfo" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.southInfo" @change="(val) => setVal('record', 'southInfo', val)"></z-input>
				<z-input label="正西信息:" labelWidth="90" prop="westInfo" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.westInfo" @change="(val) => setVal('record', 'westInfo', val)"></z-input>
				<z-input label="正北信息:" labelWidth="90" prop="northInfo" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.northInfo" @change="(val) => setVal('record', 'northInfo', val)"></z-input>
				<z-input label="水源信息:" labelWidth="90" prop="waterSourceInfo" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.waterSourceInfo" @change="(val) => setVal('record', 'waterSourceInfo', val)"></z-input>
				<z-input label="灾害信息:" labelWidth="90" prop="disasterInfo" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.disasterInfo" @change="(val) => setVal('record', 'disasterInfo', val)"></z-input>
				<z-input label="其他信息:" labelWidth="90" prop="otherInfo" :disabled="cantEdit" :readonly="cantEdit" :required="false"
					:value="form.otherInfo" @change="(val) => setVal('record', 'otherInfo', val)"></z-input>
			</view>
			<view class="title">照片信息</view>
			<view class="form_group upload-box" style="padding: 8px 4px 4px 4px;">
				<u-grid :border="false" col="4">
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude" :value="form.eastImage"
							:remark="'cj_eastImage'" @setVal="(val) => setVal('record', 'eastImage', val)"></z-img-upload>
						<text class="z-upload-title">正东照片</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude" :value="form.southImage"
							:remark="'cj_southImage'" @setVal="(val) => setVal('record', 'southImage', val)"></z-img-upload>
						<text class="z-upload-title">正南照片</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude" :value="form.westImage"
							:remark="'cj_westImage'" @setVal="(val) => setVal('record', 'westImage', val)"></z-img-upload>
						<text class="z-upload-title">正西照片</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude" :value="form.northImage"
							:remark="'cj_northImage'" @setVal="(val) => setVal('record', 'northImage', val)"></z-img-upload>
						<text class="z-upload-title">正北照片</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude" :value="form.centerGps"
							:remark="'cj_centerGps'" @setVal="(val) => setVal('record', 'centerGps', val)"></z-img-upload>
						<text class="z-upload-title">中心GPS屏显</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude" :value="form.waterSourceImage"
							:remark="'cj_waterSourceImage'" @setVal="(val) => setVal('record', 'waterSourceImage', val)"></z-img-upload>
						<text class="z-upload-title">水源照片</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude" :value="form.disasterImage"
							:remark="'cj_disasterImage'" @setVal="(val) => setVal('record', 'disasterImage', val)"></z-img-upload>
						<text class="z-upload-title">灾害照片</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude" :value="form.otherImage"
							:remark="'cj_otherImage'" @setVal="(val) => setVal('record', 'otherImage', val)"></z-img-upload>
						<text class="z-upload-title">其他照片</text>
					</u-grid-item>
				</u-grid>
			</view>
		</u-form>
		<u-notify ref="notify"></u-notify>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NotifyMix from '@/mixins/notify-fix.js'
	import Util from '@/utils/index.js'
	export default {
		mixins: [NotifyMix],
		data() {
			return {
				form: {
					wgs84Longitude: "", // 获取经度
					wgs84Latitude: '', // 获取纬度
					wgs84Altitude: '', // 获取海拔高度
					screenLongitude: '', // 输入经度
					screenLatitude: '', // 输入纬度
					screenAltitude: '', // 输入海拔高度
					landUse: "", // 土地利用方式
					landUseName: '', // 土地利用方式名称
					nitrogen: '', // 氮肥
					phosphate: '', // 磷肥
					potassium: "", // 钾肥
					organic: '', // 有机肥
					compound: '', // 复合肥
					eastInfo: '', // 正东信息
					eastImage: '', // 正东照片
					southInfo: '', // 正南信息
					southImage: '', // 正南照片
					westInfo: '', // 正西信息
					westImage: '', // 正西照片
					northInfo: '', // 正北信息
					northImage: '', // 正北照片
					centerGps: '', // 中心屏显gps照片
					waterSourceInfo: '', // 水源信息
					waterSourceImage: '', // 水源照片
					disasterInfo: '', // 灾害信息
					disasterImage: '', // 灾害照片
					otherInfo: '', // 其他信息
					otherImage: '' // 其他照片
				},
				rules: {
					'wgs84Longitude': {
						required: true,
						message: '点击获取 获取经度',
						trigger: ['change'],
					},
					"wgs84Latitude": {
						required: true,
						message: '点击获取 获取纬度',
						trigger: ['change'],
					},
					"wgs84Altitude": {
						required: true,
						message: '点击获取 获取海拔',
						trigger: ["change"],
					},
					"screenLongitude": {
						required: true,
						message: '请输入屏显经度',
						trigger: ['change'],
					},
					"screenLatitude": {
						required: true,
						message: '请输入屏显纬度',
						trigger: ['change'],
					},
					"screenAltitude": {
						required: true,
						message: '请输入屏显海拔',
						trigger: ['change'],
					},
					"landUse": {
						required: true,
						message: '请选择土地利用方式',
						trigger: ['change'],
					}
				},
				showlandUsePicker: false,
				landUseList: [],
				inited: false,
			}
		},
		computed: {
			...mapState({
				action: state => state.cjRecord.action,
				taskInfo: state => state.cjRecord.taskInfo,
				recordInfo: state => state.cjRecord.recordInfo,
				isLT200m: state => state.cjRecord.isLT200m,
				userInfo: state => state.user.userInfo,
			}),
			distanceLabel() {
				return `刷新位置 ${this.isLT200m ? '(当前<200米)' : '(当前>200米)'}`
			},
			p1Edit() {
				return ['edit', 'add'].includes(this.action) && this.taskInfo.positionType === '1' && this.isLT200m
			},
			p2Edit() {
				return ['edit', 'add'].includes(this.action) && this.taskInfo.positionType === '2'
			},
			canEdit() {
				return this.p1Edit || this.p2Edit
			},
			cantEdit() {
				return !this.canEdit
			}
		},
		methods: {
			...mapMutations({
				setTaskInfoAttr: 'cjRecord/setTaskInfoAttr',
				setRecordInfoAttr: 'cjRecord/setRecordInfoAttr'
			}),
			calcDistance() {
				this.$parent.calcIsLT200m()
			},
			async getPosition() {
				uni.showLoading()
				const res = await Util.UniUtil.getLonLat()
				uni.hideLoading()
				if (!res) {
					this.notifyFail(`获取地理位置失败`)
				}
				this.setVal('task', 'wgs84Longitude', res.wgs84.longitude)
				this.setVal('task', 'gcj02Longitude', res.gcj02.longitude)
				this.setVal('task', 'wgs84Latitude', res.wgs84.latitude)
				this.setVal('task', 'gcj02Latitude', res.gcj02.latitude)
				this.setVal('task', 'autoLngLat', true)
			},
			setVal(target, key, val) {
				this.form[key] = val
				let d = {
					key,
					val
				}
				if (target === 'task') {
					this.setTaskInfoAttr(d)
				} else if (target === 'record') {
					this.setRecordInfoAttr(d)
				}
			},
			setLandUse(val) {
				this.form.landUse = val.value
				this.form.landUseName = val.label
				this.setTaskInfoAttr({
					key: 'landUse',
					val: val.value
				})
				this.showlandUsePicker = false
			},
			async checkForm() {
				try {
					await this.$refs.formRef.validate()
					return true
				} catch (e) {
					return false
				}
			}
		},
		mounted() {
			Util.ObjUtil.assign(this.taskInfo, this.form)
			Util.ObjUtil.assign(this.recordInfo, this.form)
			if (!Util.StringUtil.isEmpty(this.taskInfo.landUse)) {
				this.form.landUseName = Util.DictUtil.getLabel('cj_land_use', this.taskInfo.landUse)
			}
			this.landUseList = Util.DictUtil.getDict('cj_land_use')
			this.inited = true
		}
	}
</script>

<style>
</style>